<!DOCTYPE html>
<html lang="en">
<head>
     <!-- Bootstrap core CSS -->
     <link href="template/assets/css/bootstrap.css" rel="stylesheet">
     <!--external css-->
     <!--link href="template/assets/font-awesome/css/font-awesome.css" rel="stylesheet" /-->
     <!--link rel="stylesheet" type="text/css" href="template/assets/css/zabuto_calendar.css"-->
     <!--link rel="stylesheet" type="text/css" href="template/assets/js/gritter/css/jquery.gritter.css" /-->
     <!--link rel="stylesheet" type="text/css" href="template/assets/lineicons/style.css"-->
    
     <!-- Custom styles for this template -->
     <!--link href="template/assets/css/style.css" rel="stylesheet"-->
     <link href="template/assets/css/style-responsive.css" rel="stylesheet">
     <!--link href="template/plugins/dialog/dist/ui-dialog.css"  rel="stylesheet"-->
    
     <script src="template/assets/js/jquery.js"></script>
     <script type="text/javascript" src="template/assets/js/jquery-1.8.3.min.js"></script>
     <script type="text/javascript" src="template/assets/js/bootstrap.min.js"></script>
 </head>
<body>
<div class="form-group">
    <form id='form' name="form" class="form-horizontal style-form">
    <table class="table table-bordered ">
        <thead>
        <tr>
            <th>所属区域 <i class="text-danger">*</i></th>
            <th>名称 <i class="text-danger">*</i></th>
            <th width="20%">地区编码</th>
            <th></th>
        </tr>
        </thead>
        <tbody class="tbody">
            <tr>
                <td>
                    <select name="id_zone[]" class="form-control" required>
                        <option value="">选择区域</option>
                        {% for i in zone %}
                            <option value="{{ i.id_zone }}">{{ i.title }}</option>
                        {% endfor %}
                    </select>
                </td>
                <td><input type="text" name="title[]" class="form-control" required></td>
                <td><input type="text" name="code[]" class="form-control"></td>
                <td><i class="fa fa-plus add_row" style="cursor: pointer;"></i></td>
            </tr>
        </tbody>
    </table>
         <div class="text-center col-sm-10">
             <button type="button" class="btn btn-success save"> 提 交 </button>
         </div>

    </form>
</div>
<script>
   $(".save").click(function () {
       var url ='country.php?&act=add_son_save';
       var data = $("#form").serialize();
       $.post(url,data).success(function (data) {
          var ret = JSON.parse(data) ;
          if(!ret.ret)
          {
             alert(ret.msg);
          }
          else{
              window.parent.ModalClose();
          }
       })

   });

    $('.add_row').click(function () {
         addrow();
    });

   function delRow(obj) {
       $(obj).parents('tr').remove();
   }

    function  addrow() {
        var zone = '{{ zone_json|raw }}';
        zone = JSON.parse(zone);
        var option='';
        var tr = '<tr> <td> <select name="id_zone[]" class="form-control"><option value="0">同上</option>';
        for(var i in zone)
        {
            option += '<option value=" '+zone[i].id_zone+'"> '+zone[i].title+'</option>';
        }
        tr += option;
        tr+='</select> </td> <td><input type="text" name="title[]" class="form-control" required></td> <td><input type="text" name="code[]" class="form-control"></td> <td><i class="fa fa-minus add_row" style="cursor: pointer;" onclick="delRow(this)"></i>  <i class="fa fa-plus add_row" style="cursor: pointer;" onclick="addrow();"></i></td> </tr>';

        $(".tbody").append(tr);
    }


</script>
</body>

</html>

